<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 class="login-title">登录</h2>
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginFormRef"
        label-width="100px"
      >
        <el-form-item label="用户手机号" prop="phone">
          <el-input
            v-model="loginForm.phone"
            placeholder="请输入用户名(手机号）"
          />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
      </el-form>
      <div class="login-button-set">
        <el-form-item>
          <el-button
            type="primary"
            :color="colorManager.getColor('__login_button_color')"
            @click="handleLogin"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleNavigateIndex"
            >主页</el-button
          >
        </el-form-item>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import { colorManager } from "@/assets/scss/colors-util";
import { oauthLocalLoginPassword } from "@/api/auth/oauth/oauth.js";
import { useUserStore } from "@/store/auth/userStore.js";
import { useSystemStore } from "@/store/system/systemStore.js";
import router from "@/router";
const systemStore = useSystemStore();
const userStore = useUserStore();

// 组件引用
const loginFormRef = ref();
console.log("loginFormRef", loginFormRef);

const loginForm = ref({
  phone: "",
  password: "",
});
const rules = ref({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

// 样例
// grant_type: "password", // 基本不变
//   scope: "all", // 基本不变
//   password: "123",
//   username: '{"phone":"123","authType":"password"}',
const loginQuery = ref({
  grant_type: "password", // 基本不变
  scope: "all", // 基本不变
  password: "",
  username: '{"phone":"","authType":"password"}',
});

const handleLogin = async () => {
  if (!loginFormRef) {
    console.log("loginFormRef获取失败");
    ElMessageBox({ message: "系统出现错误，请刷新", type: "error" });
    return;
  }
  var isValid = false;
  // 等待选择结束
  await loginFormRef.value.validate((valid) => {
    if (valid) {
      console.log("登录中", loginForm);
      isValid = true;
    } else {
      console.log("校验失败");
    }
  });
  console.log("isValid", isValid);
  if (isValid) {
    // 转化json
    var usernameTemp = { phone: loginForm.value.phone, authType: "password" };
    var username = JSON.stringify(usernameTemp);
    console.log("usernameTemp-str", username);
    // 更新请求内容
    loginQuery.value.username = username;
    loginQuery.value.password = loginForm.value.password;

    // 进行登录
    var res = await oauthLocalLoginPassword(loginQuery.value);
    console.log(res);
    userStore.loginSuccess(res);
    systemStore.userLoginSuccess();
  }
};
const handleNavigateIndex = () => {
  console.log("回到主页");
  router.push({ path: "/index" });
};
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-card {
  width: 500px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}
.login-button-set {
  display: flex;
  justify-content: space-around;
}
</style>
